<template>
    <div class="box">
        <div class="header">
            <van-search v-model="value" show-action placeholder="请输入搜索关键词"
                style="position: fixed; width: 100%; color: black; " @update:model-value="onUpdated">
                <template #action>
                    <van-icon name="list-switching" style="font-size: 15px" />
                </template>
            </van-search>

        </div>
        <div class="meddle">
            <ul>
                <li >
                    <van-empty v-if="list.length == 0" image="search" :description="'搜索不到' + value + '该商品'" />
                    <div v-else v-for="item in list" :key="item.id">
                        <van-card :price="item.price" :title="item.title" :thumb="item.image" />
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script setup>
import request from '@/utils/request.js'
import { ref, onMounted } from "vue";
const list = ref([])
const value =ref('')
const onUpdated = () => {
    request.get('/search', {
        params: {
            value: value.value
        }
    }).then(res => {
        if (res.data.code == 200) {
            list.value == res.data.data
        }
    })
}
</script>